<script type="text/javascript" charset="utf-8">
$(function() {
  $('#cropbox').Jcrop({
    onChange: update_crop,
    onSelect: update_crop,
    setSelect: [0, 0, 330, 175],
    aspectRatio: 330/175
  });
});

function update_crop(coords) {
  var rx = 370/coords.w;
  var ry = 175/coords.h;
  $('#preview').css({
    width: Math.round(rx * <%= @product.cover_geometry(:large).width %>) + 'px',
    height: Math.round(ry * <%= @product.cover_geometry(:large).height %>) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
  var ratio = <%= @product.cover_geometry(:original).width %> / <%= @product.cover_geometry(:large).width %>;
  $("#crop_x").val(Math.round(coords.x * ratio));
  $("#crop_y").val(Math.round(coords.y * ratio));
  $("#crop_w").val(Math.round(coords.w * ratio));
  $("#crop_h").val(Math.round(coords.h * ratio));
}
</script>

<%= image_tag @product.cover.url(:large), :id => "cropbox" %>

<h4>预览:</h4>
<div style="width:330px; height:175px; overflow:hidden">
  <%= image_tag @product.cover.url(:large), :id => "preview" %>
</div>

<br/>

<%= form_for [:admin, @product] do |f| %>
  <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
    <%= f.hidden_field attribute, :id => attribute %>
  <% end %>
  <p><%= f.submit "裁剪" %></p>
<% end %>